
<template>
  <div class="init-house">

    <!-- 表单 -->
    <div class="form">
      <van-form>
        <van-field readonly clickable name="picker" :value="areaname" label="池塘" placeholder="点击选择"
          @click="showPicker1 = true" />

        <van-field v-model="price" type="number" label="单价" placeholder="单价" />

        <van-field v-model="weight" type="number" label="重量" @focus="setindex(-1)" placeholder="重量" />

        <div style="text-align:center;padding-top: 5px;">

          <van-button size="small" type="primary" @click="shoudong()">手动添加</van-button>

        </div>

        <van-field v-model="money" type="number" label="总金额" readonly />

        <van-field v-model="sumweight" type="number" label="总重量" readonly />
      </van-form>
      <div>
        <table style="width: 100%;">
          <tr>
            <td>池塘</td>
            <td>单价</td>
            <td>重量</td>
            <td>金额</td>
            <td>操作</td>
          </tr>
          <tr v-for="(item, index) in list" v-bind:key="index">
            <td>{{ item.areaname }}</td>
            <td>{{ item.price }}</td>
            <td>{{ item.weight }}</td>
            <td>{{ item.money }}</td>
            <td>

              <van-button type="danger" @click="del(item)">删</van-button>
            </td>
          </tr>
        </table>

      </div>
      <div class="btns">
        <van-button name="2" type="info"
          style="width:80px;height:40px;background-color: #5e9af6;font-size: 12px;border: 0px;" @click="jisuan()"
          class="btn">一键计算</van-button>
        <van-button name="2" type="info"
          style="width:80px;height:40px;background-color: #42e0d1;font-size: 12px;border: 0px;" @click="save()"
          class="btn">提交</van-button>
        <van-button name="2" type="info"
          style="width:80px;height:40px;background-color: #f99c79;font-size: 12px;border: 0px;" @click="cheng()"
          class="btn">电子秤</van-button>
        <van-button name="2" type="info"
          style="width:80px;height:40px;background-color: #9da0a4;font-size: 12px;border: 0px;" @click="clear()"
          class="btn">清空</van-button>
      </div>
      <div class="btns">
        <!-- <van-button name="2" type="info"
          style="width:80px;height:40px;background-color: #9da0a4;font-size: 12px;border: 0px;" @click="test()"
          class="btn">测试</van-button> -->

      </div>


      <van-popup v-model="showPicker1" position="bottom">
        <van-picker show-toolbar :columns="arealist" @confirm="onConfirm1" @cancel="showPicker1 = false" />
      </van-popup>



    </div>
  </div>
</template>

<script>
import Bus from '../../../utils/bus.js'
import { warehouseAdd, maixia } from "../../../api/warehouse";
import { areaList } from "../../../api/area";
Array.prototype.remove = function (val) {
  var index = this.indexOf(val);
  if (index > -1) {
    this.splice(index, 1);
  }
};

export default {
  name: "",
  data() {
    return {
      showPicker1: false,
      price: "",
      weight: "",
      values: "",
      value: "",
      money: "",
      areaname: "",
      aid: 0,
      title: "",
      showPicker: false,
      list: [],
      arealist: [],
      type: "",
      index: -1,
      sumweight: "",
    };
  },
  methods: {
    onConfirm1(value) {
      console.log("value", value);
      this.areaname = value.text;
      this.aid = value.value;
      this.showPicker1 = false;
    },
    clear() {
      this.weight = "";
      this.money = "";
      this.list = [];

    },
    jisuan() {

      console.log("???")
      localStorage.setItem("price", this.price);
      let money = 0;
      let weight = 0;
      for (let i = 0; i < this.list.length; i++) {
        console.log("this.list[i].weight", this.list[i].weight, this.price);
        money += parseFloat(parseFloat(this.price) * parseFloat(this.list[i].weight));
        weight += parseFloat(this.list[i].weight);
      }
      console.log("money", money);
      this.money = parseFloat(money).toFixed(2);
      this.sumweight = parseFloat(weight).toFixed(2);
    },
    onClickRight() { },
    choose() {
      this.$router.push({ path: "/add-material", query: {} });
    },
    async save() {
      var data = {};

      let list = this.list;
      if (this.list.length == 0) {
        this.$toast("无数据");
        return;
      }
      if (this.money == "") {
        this.$toast("请点击一键计算");
        return;
      }

      data.goods = JSON.stringify(list);
      data.money = this.money;
      data.userid = localStorage.getItem("userid");
      data.type = 3
      let res = await maixia(data);
      if (res.status == 200) {

        this.$toast("操作成功");
        this.list = [];
        this.weight = '';
        this.money = 0;

      }

    },
    cheng() {
      try {
        window.ReactNativeWebView.BluetoothConn();
      } catch (eee) {

      }
    },
    setindex(index) {
      this.index = index;
    },
    add() {
      this.list.push({ weight: '', price: this.price });
    },
    del(uitem) {
      this.list.remove(uitem);
    },
    async getarea() {
      var res = await areaList({ userid: localStorage.getItem("userid") });
      if (res.status == 200) {
        var list = res.data;
        let arealist = [];
        for (var i = 0; i < list.length; i++) {
          arealist.push({ text: list[i].areaname, value: list[i].id });
        }

        this.arealist = arealist;
      }


    },
    test() {
      this.list.push({ weight: 2, price: this.price, areaname: this.areaname, money: this.price * 2, aid: this.aid });
    },
    shoudong() {
      if (this.areaname == '') {
        this.$toast("请选择池塘");
        return;
      }
      if (this.weight == '') {
        this.$toast("请输入重量");
        return;
      }
      var money = this.weight * this.price;
      this.list.push({ weight: this.weight, price: this.price, areaname: this.areaname, aid: this.aid, money: parseFloat(money).toFixed(2) });

    },
    setData(weight) {

      if (this.areaname == '') {
        this.$toast("请选择池塘");
        return;
      }
      if (this.price == '') {
        this.$toast("请输入单价");
        return;
      }

      //   alert(weight);
      var money = parseFloat(this.price) * parseFloat(weight);
      //   alert(money);
      this.list.push({ weight: weight, price: this.price, areaname: this.areaname, aid: this.aid, money: parseFloat(money).toFixed(2) });

    }
  },
  computed: {},
  watch: {},
  created() {

    this.price = localStorage.getItem("price");
    this.getarea();

  },
  beforeMount() {

  },
  mounted() {

  }

};
</script>

<style lang="scss" scoped>
.init-house {
  width: 100%;
  height: 100%;

  .form {
    width: 100%;
    background-color: #fff;
    padding: 40px 30px;

    .btns {
      margin-top: 100px;
      width: 100%;
      display: flex;
      justify-content: space-around;

      .btn {
        border-radius: 15px;
      }
    }
  }
}
</style>